<template>
  <div>
    <el-dialog
      title="新增工单"
      width="45%"
      :visible="dialogVisible"
      @close="handleClose"
    >
      <el-form
        ref="taskDialogForm"
        label-width="80px"
        :model="addTaskDate"
        :rules="rules"
      >
        <el-form-item
          prop="innerCode"
          label="设备编号"
        >
          <el-input v-model="addTaskDate.innerCode" placeholder="请输入" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item v-if="productType" label="工单类型" prop="productType">
          <el-select v-model="addTaskDate.productType" placeholder="请选择" style="width:100%">
            <el-option label="补货工单" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-else label="工单类型" prop="productType">
          <el-select v-model="addTaskDate.productType" placeholder="请选择" style="width:100%">
            <el-option label="投放工单" value="1" />
            <el-option label="维修工单" value="3" />
            <el-option label="撤机工单" value="4" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="show" label="补货数量" prop="details">
          <a class="el-icon-document list" @click="getReplenishList">补货清单</a>
        </el-form-item>

        <el-form-item label="运营人员" prop="assignorId">
          <el-select v-model="addTaskDate.assignorId" placeholder="请选择" style="width:100%">
            <el-option v-for="item of operatorList" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc" size="medium">
          <el-input v-model="addTaskDate.desc" type="textarea" row="3" placeholder="请输入备注(不超过40字)" maxlength="40" show-word-limit :autosize="{ minRows: 2, maxRows: 4}" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center" align="middle" class="dialog-footer">
        <el-button type="warning" plain @click="handleClose">取消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确认</el-button>
      </el-row>
      <replenishment-details :is-show.sync="isShow" :replenish-details="replenishDetails" @detailsList="detailsList" />
    </el-dialog>
  </div>
</template>

<script>
import { getOperationInfo, getReplenishList, getAddTask, getTaskType } from '@/api/task'
import replenishmentDetails from './replenishmentDetails.vue'
export default {
  name: 'AddTask',
  components: { replenishmentDetails },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addTaskDate: {
        innerCode: '',
        userId: 1,
        desc: '',
        details: [],
        createType: 1,
        productType: '',
        assignorId: '',
        userName: ''
      },
      loading: false,
      isShow: false,
      rules: {
        innerCode: [
          { required: true, message: '设备编号不得为空', trigger: 'blur' },
          { min: 1, max: 15, message: '最长字数15' }
        ],
        productType: [
          { required: true, message: '工单类型不得为空', trigger: 'blur' }
        ],
        assignorId: [
          { required: true, message: '运营人员不得为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '备注不得为空', trigger: 'blur' },
          { min: 1, max: 40, message: '最长字数40字', trigger: 'blur' }
        ]
      },
      operatorList: [],
      replenishDetails: [],
      taskTypeList: [],
      show: this.$route.path.includes('/task/business'),
      productType: this.$route.path.includes('/task/business')

    }
  },
  watch: {
    'addTaskDate.innerCode': {
      async  handler(value) {
        if (value.length > 0) {
          try {
            const { data } = await getOperationInfo(value)
            // console.log(data)
            this.operatorList = data
          } catch (error) {
            console.log(error)
          }
        }
      }
    }
  },

  created() {
    this.getTaskType()
  },
  methods: {
    async getTaskType() {
      const { data } = await getTaskType()
      // console.log(data)
      this.taskTypeList = data
    },

    async getReplenishList() {
      this.isShow = true
      const res = await getReplenishList(this.addTaskDate.innerCode)
      // console.log(res)
      this.replenishDetails = res.data.map(item => {
        item.expectCapacity = item.maxCapacity
        if (item.sku === null) {
          item.sku = {}
          item.sku.skuName = '-'
          item.currentCapacity = '-'
          item.maxCapacity = '-'
        }
        return item
      })
    },

    async submit() {
      try {
        await this.$refs.taskDialogForm.validate()
        await getAddTask(this.addTaskDate)
        this.$message.success('新增成功')
        this.handleClose()
      } catch (error) {
        if (error.response && error.response.status === 500) {
          this.$message.error(error.response.data)
        }
      }
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.$refs.taskDialogForm.resetFields()
    },
    detailsList(data) {
      this.addTaskDate.details = data
    }

  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-dialog__title {
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 700;
}
::v-deep.el-dialog {
    border-radius: 15px !important;

}
 ::v-deep label {
    font-weight: 400 !important;
  }
.el-form{
        padding: 0px 50px !important;
        }
        .list {
            color: #6783f7;
            font-weight: 600;
        }
 .table {
    margin-top: -15px;
      ::v-deep .el-table th, .el-table tr th {
         background: rgb(243, 246, 251);
         border: none;
         font-size: 14px;
         color: #666;

    }
    ::v-deep.el-table {
      height: 368px !important;
      border-bottom: none !important;

    }

 }

 .el-button--primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
     margin-left: 50px !important;

  }
  .el-button--warning.is-plain {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
      font-size: 14px;

  }

</style>
